<template>
  <div id="tourist-page">
    <!-- 类别标签选择开始 -->
    <div class="tags">
      <div class="box flex-style">
        <div class="label">课程类别</div>
        <div class="col-line">|</div>
        <div class="tag flex-style">
          <div
            @click="tagClick(tag)"
            class="tag-item"
            :class="tag == activeTag ? 'active' : 'no-active'"
            v-for="tag of tagList"
            :key="tag"
          >
            {{ tag }}
          </div>
        </div>
      </div>
    </div>
    <!-- 类别标签选择结束 -->
    <!-- swiper开始 -->
    <div class="swiper">
      <el-carousel :interval="4000" type="card" height="240px">
        <el-carousel-item v-for="swiper in swiperList" :key="swiper.action">
          <img :src="swiper.src" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- swiper结束 -->
    <!-- 课程展示1开始 -->
    <div class="lesson-show" v-for="i in 2" :key="'i'+i">
      <div class="title">编程</div>
      <el-carousel :autoplay="false" indicator-position="none">
        <el-carousel-item v-for="item in 4" :key="'item'+item">
          <div class="lesson-item">
            <lesson-item />
            <lesson-item />
            <lesson-item />
            <lesson-item />
            <lesson-item />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 课程展示1结束 -->
    <!-- 穿插广告开始 -->
    <div class="adv">
      <adv-item />
    </div>
    <!-- 穿插广告结束 -->
    <!-- 课程展示2开始 -->
    <div class="lesson-show" v-for="i in 2" :key="'ii'+i">
      <div class="title">编程</div>
      <el-carousel :autoplay="false" indicator-position="none">
        <el-carousel-item v-for="item in 4" :key="'item0'+item">
          <div class="lesson-item">
            <lesson-item />
            <lesson-item />
            <lesson-item />
            <lesson-item />
            <lesson-item />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 课程展示2结束 -->

    <!-- 全部课程展示开始 -->

    <div class="all-lessons">
      <div class="title">全部课程</div>
      <!-- 课程 -->
      <div class="lessons">
        <div class="lesson-item" v-for="l in 20" :key="'l'+l">
          <lesson-item />
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
    <!-- 全部课程展示结束 -->
    
  </div>
</template>

<script>
import AdvItem from "../../components/commons/AdvItem.vue";
import LessonItem from "../../components/lessons/LessonItem.vue";
export default {
  components: { LessonItem, AdvItem },
  data() {
    return {
      activeTag: "全部",
      tagList: ["全部", "Python", "Go", "Vue", "JavaScript", "C语言"],
      swiperList: [
        {
          src: "https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF",
          action: "1-1",
        },
        {
          src: "https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF",
          action: "2-2",
        },
        {
          src: "https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF",
          action: "3-3",
        },
        {
          src: "https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
          action: "4-4",
        },
      ],
    };
  },
  methods: {
    tagClick(tag) {
      console.log(tag);
      console.log(this.activeTag);
      this.activeTag = tag;
    },
  },
};
</script>

<style scoped>
#tourist-page .flex-style {
  display: flex;
  display: -webkit-flex;
}

#tourist-page .tags {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

#tourist-page .tags .box {
  width: 85%;
  margin: 0 auto;
  justify-content: start;
  align-items: center;
  height: 60px;
}

#tourist-page .tags .box .col-line {
  font-size: 15px;
  line-height: 60px;
  margin: 0 20px;
  color: #80808040;
  font-weight: bold;
}

#tourist-page .tags .label {
  font-size: x-large;
  font-weight: bold;
}

#tourist-page .tags .tag {
  height: 36px;
  line-height: 36px;
  margin: 0 20px;
  font-weight: bold;
}

#tourist-page .tags .tag .tag-item {
  margin: 0 10px;
  cursor: pointer;
  padding: 0 20px;
  border-radius: 20px;
}

#tourist-page .tags .tag .active {
  background-color: #409eff;
  color: white;
}

#tourist-page .tags .tag .no-active:hover {
  background-color: #80808020;
}

#tourist-page .swiper{
  margin-top: 10px;
}

#tourist-page .swiper .el-carousel__item img {
  height: 240px;
  width: 100%;
  border-radius: 5px;
}

#tourist-page .swiper .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

#tourist-page .swiper .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

#tourist-page .lesson-show {
  width: 85%;
  margin: 0 auto;
}

#tourist-page .lesson-show .title {
  margin: 30px 0;
  font-size: 20px;
  font-weight: bold;
}

#tourist-page .lesson-show .lesson-item {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  padding: 20px 0;
}

#tourist-page .adv {
  width: 85%;
  margin: 20px auto;
}

#tourist-page .all-lessons {
  width: 85%;
  margin: 20px auto;
  margin-top: 60px;

}

#tourist-page .all-lessons .title {
  font-size: 20px;
}

#tourist-page .all-lessons .pagination {
  width: 35%;
  margin: 20px auto;
}

#tourist-page .all-lessons .lessons {
  padding: 40px 0;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-wrap: wrap;
}



#tourist-page .all-lessons .lessons .lesson-item:nth-child(5n) {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}

#tourist-page .all-lessons .lessons .lesson-item:nth-child(5n+1) {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
}

#tourist-page .all-lessons .lessons .lesson-item:nth-child(5n+2),.lesson-item:nth-child(5n+3),.lesson-item:nth-child(5n+4) {
    margin: 20px;
}

#tourist-page .footer{
    margin-top: 120px;
}
</style>